## Introduction

The `toaster` is used to show toasts (alerts) on top of an overlay.
The toasts will close themselves when the close button is clicked,
or after a timeout — the default is 5 seconds.

### When To Use

When you want to give feedback to your users about a action they take.
Often this is in the form of creation or deletion.


### Implementation details

A toast is simply a wrapper around the `Alert` component and has the same kind of types as an alert.
The following types are available:

### Types of toasts

* **info**: `toaster.notify()`
* **success**: `toaster.success()`
* **warning**: `toaster.warning()`
* **danger**: `toaster.danger()`

### Closing all toasts

In some situations toasts might become outdated before they expire.
For example when showing a toast in a setup flow, canceling out of that setup flow might make the toast irrelevant.

In those situations you can use `toaster.closeAll()` to close all open toasts.

## Keep around when mouse over

When the use hovers (mouse overs) the toast it will stop the countdown timer and the toast
will stay alive as long as the toast is being hovered.

### Self managed

The `toaster` manages state itself — and uses `ReactDOM` to show toasts.
The `toaster` is an instance of the `Toaster` class.

## Notify

```jsx
<Button
  onClick={() =>
    toaster.notify(
      'Evergreen is a open-source design system'
    )
  }
>
  Notify
</Button>
```

## Success

```jsx
<Button
  onClick={() =>
    toaster.success(
      'Your source is now sending data'
    )
  }
>
  Success
</Button>
```

## Warning

```jsx
<Button
  onClick={() =>
    toaster.warning(
      'Changes will affect all Warehouses'
    )
  }
>
  Warning
</Button>
```

## Danger

```jsx
<Button
  onClick={() =>
    toaster.danger(
      'Something went wrong trying to create your audience'
    )
  }
>
  Danger
</Button>
```

## Close all

```jsx
<Button
  onClick={() =>
    toaster.closeAll()
  }
>
  Close All
</Button>
```

## Adding a description

A `description` is used as the children of the `Alert` component.
The description can be a React node.


```jsx
<Button
  onClick={() =>
    toaster.success(
      'Your source is now sending data',
      {
        description: 'Connect your source to a destination to receive data.'
      }
    )
  }
>
  Success with description
</Button>
```

## Toasts with custom duration

It is possible to add a custom duration when showing a toast.
The default `duration` is `5` seconds.
The `duration` property is in seconds — not milliseconds.



```jsx
<Button
  onClick={() =>
    toaster.success(
      'Stick around for 10 seconds',
      {
        duration: 10
      }
    )
  }
>
  10 Seconds
</Button>
```

## Unique toasts

There are cases when it's only one toast with the same content can be shown at a time.
Passing a unique ID via `id` property allows Evergreen to close all previous toasts with the same ID, before showing a new one.


```jsx
<Button
  onClick={() =>
    toaster.warning('Only one toaster will be shown', {
      id: 'forbidden-action'
    })
  }
>
  Show only one toaster
</Button>
```
